Создаём административную панель на Bootstrap, CSS(LESS) и JavaScript. #5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main Page</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,400italic,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="js/jpushmenu/css/jPushMenu.css" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="fonts/font-awesome-4/css/font-awesome.min.css">
<link rel="stylesheet/less" type="text/css" href="css/style.less" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
</head>
<body>
<div>
<div>
<div><i></i></div>
<div>
<div>
<div>
<div>
<a href="#"></a>
</div>
<div>
<div><img src="images/avatar.png" alt="Avatar" /></div>
<div>
<h5>Big Daddy</h5>
<div>
<button data-toggle="dropdown" type="button">
<i></i><span>Available</span><i></i>
</button>
<ul>
<li><a href="#"><i></i><span>Busy</span></a></li>
<li><a href="#"><i></i><span>Invisible</span></a></li>
<li><a href="#"><i></i><span>Away</span></a></li>
</ul>
</div>
</div>
</div>
<ul>
<li ><a href="index.html"><i></i><span>Main Page</span></a></li>
<li><a href="#"><i></i><span>Page 2</span></a></li>
<li><a href="#"><i></i><span>Multilevel</span></a>
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<ul>
<li>
<a href="#" data-toggle="dropdown"><img alt="Avatar" src="images/avatar.png" /><span>Big Daddy</span> <b></b></a>
<ul>
<li><a href="#">Аккаунт</a></li>
<li><a href="#">Настройки</a></li>
<li></li>
<li><a href="#">Выйти</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="javascript:;"><i></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
<!-- Right Sidebar -->
<nav>
<h4>Menu</h4>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
</nav>
<!-- Footer JS scripts for faster loading -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/jpushmenu/js/jPushMenu.js"></script>
<script src="js/main/main.js"></script>
</body>
</html>
exabyte.ws
Блочная верстка сайта - урок с примером
Раньше на просторах Интернета был широко распространён табличный тип вёрстки, которому посвящена отдельная статья. Однако со временем этот подход к созданию структуры сайта устарел, и на смену ему пришла блочная вёрстка.
Отличия блочной вёрстки от табличной
Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега <table>, то концепция блочной вёрстки основана на активном использовании универсальных тегов <div>, внутрь которых помещается содержимое, включая другие теги.
Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки <div>, которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего», тогда как <table> — это таблица, которую нужно использовать для отображения табличных данных и не более того.
Единственный ощутимый минус блочной вёрстки — сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.
Суть блочной вёрстки
В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны.
Каждая часть страницы помещается в свой блок <div>: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.
Конечный HTML-документ представляет собой набор блоков <div> с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом <link>, или как минимум в контейнере <style> секции <head>.
Принципы блочной вёрстки
Первый — конечно же, повсеместное использование тега <div>, который можно назвать базовым элементом блочной структуры, но об этом было сказано уже достаточно много.
Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу. Идеально.
Третий принцип — таблицы нужно использовать не везде, а по необходимости, при этом полностью отказываться от них так же странно, как и применять не к месту.
Пример блочной вёрстки
Но, сколько не теоретизируй, а понимать всё проще на примере.
Итак, у нас есть макет (рисунок ниже). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. Зная базу, навести красоту и усложнить макет вы сможете и сами, а я лучше не буду перегружать пример.
Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги».
Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:
<!DOCTYPE html> <html> <head> <title>Блочная вёрстка</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div> <div> <h3>header (шапка сайта)</h3> </div> <div> <h3>Блок навигации</h3> </div> <div> <h3>Левая панель</h3> </div> <div> <h3>Основной контент страницы</h3> </div> <div> </div> <div> <h3>footer (низ сайта)</h3> </div> </div> </body> </html> Разберём некоторые моменты.
<div> — это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри <table>. Назначение дочерних контейнеров должно быть понятно, за исключением разве что блока <div>. Это вспомогательный слой, его смысл будет понятен, когда вы увидите код CSS.
Если открыть HTML-файл в браузере, не подключая таблицу стилей, страница будет выглядеть так.
Теперь добавим файл CSS, код которого приведён ниже.
body { background: #FFF; color: #000; font-family: Arial, sans-serif; font-size: 14px; } #header { background: #F5DEB3; width: 100%; height: 55px; } #container { background: #FFD700; margin: auto auto; text-align: center; width: 80%; height: 400px; } #navigation { background: #FE9798; width: 100%; height: 25px; } #sidebar { background: #40E0D0; float: left; width: 20%; height: 280px; } #content { background: #DCDCDC; float: right; width: 80%; height: 280px; } #clear { clear: both; } #footer { background: #00BFFF; width: 100%; height: 40px; } С помощью стилей мы последовательно оформляем содержимое тега <body> и всех находящихся внутри контейнеров с помощью ранее изученных правил.
#clear { clear:both; } запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.
CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.
Вот и весь смысл блочной структуры. Дальше можно только наполнять сайт содержимым и усложнять оформление, но делаться это будет всё равно по изложенному выше принципу. Также посмотрите статью про вёрстку сайта из PSD макета, там эти принципы показаны более наглядно.
www.seostop.ru
Создание вытягиваемого бокового меню для веб-сайта
В этом уроке мы расскажем, как создать боковое меню, такое, как у приложений для смартфона, но для веб-сайта. Мы опишем, как шаг за шагом создать меню, пригодное как для компьютеров, так и для смартфонов, начиная от структуры разметки и заканчивая добавлением эффекта вытягивания при открытии и закрытии меню.
Демонстрация работы – Скачать исходный код
Заметьте: для этого урока Вам потребуется библиотека jQuery, так что убедитесь, что последняя библиотека jQuery подключена на Вашей странице.
1. Структура
HTML:
<div> <div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Explore</a></li> <li><a href="#">Users</a></li> <li><a href="#">Sign Out</a></li> </ul> </div> <div> </div> </div> CSS:
body, html { height: 100%; margin: 0; overflow:hidden; font-family: helvetica; font-weight: 100; } .container { position: relative; height: 100%; width: 100%; } #sidebar { position: absolute; background: #DF314D; width: 240px; height: 100%; box-sizing: border-box; -moz-box-sizing: border-box; } #sidebar ul { margin: 0; padding: 0; list-style: none; } #sidebar ul li { margin: 0; } #sidebar ul li a { padding: 15px 20px; font-size: 16px; font-weight: 100; color: white; text-decoration: none; display: block; border-bottom: 1px solid #C9223D; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } #sidebar ul li:hover a { background: #C9223D; } Для начала мы создадим структуру для левого бокового меню, которую мы в результате спрячем влево. Мы добавили несколько основных стилей в пример, так что не стесняйтесь изменять вид Вашего бокового меню. Мы также добавили пустой блок под названием main-content . Этот блок будет содержать все элементы, которые Вы хотите показать на этой странице. Мы заполним его в следующем шаге.
Демонстрация работы
2. Создание простого бокового меню
HTML:
<div> <div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Explore</a></li> <li><a href="#">Users</a></li> <li><a href="#">Sign Out</a></li> </ul> </div> <div> <a href="#" data-toggle=".container"> <span></span> <span></span> <span></span> </a> <div> <h2>Creating Swipeable Side Menu For the Web</h2> <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> </div> </div> </div> CSS:
body, html { height: 100%; margin: 0; overflow:hidden; font-family: helvetica; font-weight: 100; } .container { position: relative; height: 100%; width: 100%; left: 0; -webkit-transition: left 0.4s ease-in-out; -moz-transition: left 0.4s ease-in-out; -ms-transition: left 0.4s ease-in-out; -o-transition: left 0.4s ease-in-out; transition: left 0.4s ease-in-out; } .container.open-sidebar { left: 240px; } #sidebar { position: absolute; left: -240px; background: #DF314D; width: 240px; height: 100%; box-sizing: border-box; } #sidebar ul { margin: 0; padding: 0; list-style: none; } #sidebar ul li { margin: 0; } #sidebar ul li a { padding: 15px 20px; font-size: 16px; font-weight: 100; color: white; text-decoration: none; display: block; border-bottom: 1px solid #C9223D; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } #sidebar ul li:hover a { background: #C9223D; } .main-content { width: 100%; height: 100%; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; position: relative; } .main-content .content{ box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 60px; width: 100%; } .main-content .content h2{ font-weight: 100; } .main-content .content p{ width: 100%; line-height: 160%; } .main-content #sidebar-toggle { background: #DF314D; border-radius: 3px; display: block; position: relative; padding: 10px 7px; float: left; } .main-content #sidebar-toggle .bar{ display: block; width: 18px; margin-bottom: 3px; height: 2px; background-color: #fff; border-radius: 1px; } .main-content #sidebar-toggle .bar:last-child{ margin-bottom: 0; } JS:
$(document).ready(function() { $("[data-toggle]").click(function() { var toggle_el = $(this).data("toggle"); $(toggle_el).toggleClass("open-sidebar"); }); }); Теперь мы спрячем боковое меню влево с помощью свойств position:relative и left: -240px, это значение равняется ширине бокового меню. Мы добавили кнопку и скрипт jQuery, что позволит нам вызвать боковое меню по нажатию, переключая класс open-sidebar для контейнера, в котором находятся боковое меню и блок main-content.
После этого мы просто передвигаем весь контейнер влево на 240px, и это заставит появиться левое боковое меню. Если пользователь снова нажмет на кнопку, скрипт jQuery удалит класс у контейнера, и боковое меню исчезнет. Чтобы анимировать боковое меню так, как будто оно приезжает из левого края экрана, мы добавили переход стиля, чтобы создать такую же функциональность, как у приложений для смартфонов.
Теперь у нас есть простое боковое меню, которое вызывается нажатием кнопки мыши.
Демонстрация работы
3. Делаем меню вытягиваемым
HTML:
<div> <div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Explore</a></li> <li><a href="#">Users</a></li> <li><a href="#">Sign Out</a></li> </ul> </div> <div> <div></div> <a href="#" data-toggle=".container"> <span></span> <span></span> <span></span> </a> <div> <h2>Creating Swipeable Side Menu For the Web</h2> <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> </div> </div> CSS:
body, html { height: 100%; margin: 0; overflow:hidden; font-family: helvetica; font-weight: 100; } .container { position: relative; height: 100%; width: 100%; left: 0; -webkit-transition: left 0.4s ease-in-out; -moz-transition: left 0.4s ease-in-out; -ms-transition: left 0.4s ease-in-out; -o-transition: left 0.4s ease-in-out; transition: left 0.4s ease-in-out; } .container.open-sidebar { left: 240px; } .swipe-area { position: absolute; width: 50px; left: 0; top: 0; height: 100%; background: #f3f3f3; z-index: 0; } #sidebar { background: #DF314D; position: absolute; width: 240px; height: 100%; left: -240px; box-sizing: border-box; -moz-box-sizing: border-box; } #sidebar ul { margin: 0; padding: 0; list-style: none; } #sidebar ul li { margin: 0; } #sidebar ul li a { padding: 15px 20px; font-size: 16px; font-weight: 100; color: white; text-decoration: none; display: block; border-bottom: 1px solid #C9223D; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } #sidebar ul li:hover a { background: #C9223D; } .main-content { width: 100%; height: 100%; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; position: relative; } .main-content .content{ box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 60px; width: 100%; } .main-content .content h2{ font-weight: 100; } .main-content .content p{ width: 100%; line-height: 160%; } .main-content #sidebar-toggle { background: #DF314D; border-radius: 3px; display: block; position: relative; padding: 10px 7px; float: left; } .main-content #sidebar-toggle .bar{ display: block; width: 18px; margin-bottom: 3px; height: 2px; background-color: #fff; border-radius: 1px; } .main-content #sidebar-toggle .bar:last-child{ margin-bottom: 0; }
JS:
$(document).ready(function() { $("[data-toggle]").click(function() { var toggle_el = $(this).data("toggle"); $(toggle_el).toggleClass("open-sidebar"); }); }); $(".swipe-area").swipe({ swipeStatus:function(event, phase, direction, distance, duration, fingers) { if (phase=="move" && direction =="right") { $(".container").addClass("open-sidebar"); return false; } if (phase=="move" && direction =="left") { $(".container").removeClass("open-sidebar"); return false; } } }); Самая сложная часть этого урока — сделать боковое меню вытягиваемым как на браузерах для смартфонов, так и на веб-браузерах для настольных компьютеров. На этом этапе нам нужно подключить хороший плагин, под названием TouchSwipe, созданный Matt Bryson для управления процессом вытягивания меню. Убедитесь, что этот плагин подключен в Вашем HTML файле.
Теперь, когда у нас есть возможность обнаружить жесты вытягивания и перетаскивания на смартфоне, мы воспользуемся этим, чтобы вызвать боковое меню. Ранее мы столкнулись с проблемой, так как мы применили обнаружение действия вытягивания для страницы целиком, то на смартфонах стало невозможно прокручивать страницу при увеличении, потому что открывалось боковое меню.
Так как это неприемлемо, мы добавили пустой блок класса swipe-area, чтобы определить область обнаружения жеста вытягивания. Область определения вытягивания расположена у левого края страницы, так что пользователь сможет вызвать боковое меню вытягиванием направо у левого края экрана. Это решает проблему случайного открытия меню при прокрутке страницы.
В нашем скрипте JS мы определяем действие вытягивания, использую функцию swipe(), выполняемую плагином TouchSwipe. Мы обнаруживаем две части действия вытягивания: движение и направление. Мы просто добавляем класс open-sidebar, чтобы вызвать меню, когда курсор мыши или палец пользователя движется вправо. Мы удаляем этот класс, если курсор мыши или палец пользователя движется в противоположном направлении.
В нашем эксперименте эта функция отлично работает на смартфонах, но не очень хорошо работает в браузерах на настольных компьютерах, так как когда мы двигаем мышку с зажатой кнопкой, браузеры запускают инструмент по выделению текста, который перебивает наше действие по определению вытягивания. Нам это не нужно, поэтому мы возвращаем false после того, как мы добавляем или удаляем класс open-sidebar. И это предотвращает запуск инструмента по выделению текста по умолчанию.
Демонстрация работы – Скачать исходный код
Заключение
И это все! У нас теперь есть вытягиваемое боковое меню, которое работает как в браузерах на настольных компьютерах, так и на смартфонах. Надеемся, что Вам понравился этот урок.
Автор урока Pete R.
Перевод — Дежурка
Смотрите также:
www.dejurka.ru
Yamm3 - адаптивное Bootstrap мегаменю
Легкий и чистый CSS, использует стандартную NavBar разметку и ликвидные системные классы сетки из Bootstrap 3.
Работа для фиксированной и гибкой планировки и имеет возможность включать любые элементы Bootstrap:
панели навигации, картинки, аккордеона, список, сетки, таблицы, формы.
Сетка Bootstrap внутри меню Yamm3
Accordion внутри меню Yamm3
Классическое меню
Меню с картинками
Yamm3 меню адаптированно под все гаджеты с разными разрешениями экрана. Настройка происходитом фреймворком Bootstrap3 автоматически.
Установка и подключение Yamm3
Для начала необходимо подключение. Подключаем CSS стили в секции Head сайта:
<head><link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-theme.min.css" rel="stylesheet"> <link href="css/yamm.css" rel="stylesheet"> </head>
Далее подключаем библиотеки Query и Bootstrap в раздел Head или Body:
<script src="js/jquery-1.10.2.min.js"></script><script src="js/bootstrap.min.js"></script>
Есть дополнительный JavaScript-код используется для предотвращения неожиданного закрыт в меню некоторых компонентов, таких как аккордеон, формы и др. Просто включите следующий код в вашу голову или тело раздел:
<script> $(document).on('click', '.yamm .dropdown-menu', function(e) { e.stopPropagation()})</script>
* Будьте внимательны: используется библиотека Bootstrap3 и jQuery, версией старше 1.9.0+
Yamm3 - разметка в HTML файле
Для базового использования необходимо добавить .yamm класс в верхней части навигационной панели разметки.Затем добавить свои меню в разметке .dropdown-menu класса.Вы так-же можете использовать .yamm-content как опцию обертки контента с padding'ом.
Ниже приведен простой пример.
<nav role="navigation"><ul><li><a href="#" data-toggle="dropdown">Dropdown</a><ul><li><div><div> <!-- Контент меню --></div></div></li></ul></li></ul></nav>
Для примера, давайте попробуем добавить аккордеон меню внутри нашей разметки меню. Вызываем #id accordion и используем класс .panel-group для группировки.
Вставляем вместо комментария <!-- Контент меню --> следующий код:
<div> <div> <div> <h5><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Accordion 1</a></h5> </div> <div> <div>Развернутый текст Accordion 1</div> </div> </div> <div> <div> <h5><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Accordion 2</a></h5> </div> <div> <div>Развернутый текст Accordion 2</div> </div> </div></div>
Есть много других компонентов (таблицы, акции, формы), которые можно добавить в навигационную панель. Изучение и применение этих компонентов можно реализовать самостоятельно.
Вам нужно скачать полный архив Yamm3 с офицального сайта и открыть index.html файл редактором кода.
ОФИЦАЛЬНАЯ страничка с примерами
РЕПОЗИТОРИЙ на GitHub
Скажите спасибо - поделитесь:
Комментарии (0)
oceana.nichost.ru
Изучаем CSS: class или id – что лучше?
Контролировать внешний вид HTML-элементов на странице можно при помощи нескольких селекторов. ID и CSS class являются наиболее распространенными, которые помогают не только в создании разметки HTML-документов, но и в их оформлении (стилизации).
Как применять CSS-селектор ID
Селектор ID используется для обозначения отдельного HTML-элемента с помощью уникального значения атрибута id. В следующем примере представлен элемент <div>, значением атрибута id которого является header.
В CSS к этому div-элементу можно применять различную стилизацию:
#header { width: 100%; height: 80px; background: blue } Не забывайте использовать знак # (хэштег) перед именем. Подробнее об этом можно узнать здесь и здесь.
Как применять CSS-селектор class
Селектор class HTML CSS используется для выделения отдельного или целой группы HTML-элементов с идентичным значением атрибута class.
В CSS к нескольким абзацам можно применять различную стилизацию:
.content { margin: 20px 0; line-height: 24px; font-size: 15px } Не забудьте использовать знак . (точка) перед названием класса при объявлении CSS-правила. Подробнее об этом можно узнать здесь и здесь.
Чем отличаются CSS Class и ID
Cелектор id используется для отдельных элементов страницы (#header), в то время как селектор class (.content) – для нескольких. Так как значение id задается лишь одному HTML-элементу. Другими словами, у нескольких элементов не может быть одинакового значения id в рамках одной отдельной страницы. Например, у вас может быть только один элемент с id #header, или же один элемент с id #footer.
Одинаковое значение class можно задавать одному или нескольким HTML-элементам. К примеру, у вас может быть несколько абзацев с классом .content или несколько ссылок с классом .external.
Следующий пример поможет лучше понять различия между CSS class и id, а также понять, как правильно использовать:
<div>
<div>
<a>Ссылка 1 </a>
<a>Ссылка 2 </a>
<a>Ссылка 3 </a>
<a>Ссылка 4 </a>
</div>
<div>
<p>Это наш первый абзац.</p>
<p>Это наш второй абзац.</p>
<p>Это наш третий абзац.</p>
</div>
</div> Приведенную выше HTML-разметку мы начали с div-элемента container. Мы задали ему id (#container), так как на нашей странице будет размещаться единственный контейнер. Внутри него мы размещаем разделы меню (#menu) и контента (#content). Как и в случае с контейнером, у нас будет только одно меню, и один раздел с контентом. Внутри menu располагаются четыре ссылки <a>, но к каждой из них мы применили CSS class (.link). Точно также мы применили класс (.text) к каждому абзацу в div-элементе content.
Если нужно стилизовать эти элементы, то можно использовать следующий пример:
#container { width: 1080px; margin: 0 auto; background: #eee }
#menu { height: 90px; background: #ddd }
.link { color: #000; text-decoration: none }
#content { padding: 20px }
.text { font-size: 15px } Когда используется class, а когда id?
ID используется для отдельных элементов, которые встречаются на странице только один раз. Например, заголовок, подвал, меню и т. д. Селектор class используется для одного или нескольких элементов, которые встречаются на странице несколько раз. Например, абзацы, ссылки, кнопки, элементы ввода. И хотя вы можете использовать class для отдельного элемента, но лучше использовать эти селекторы по назначению.
Также следует учитывать, что у HTML-элемента может быть указан и id, и class. Предположим, что на странице имеется два блока с одинаковым размером и стилизацией, но с разным позиционированием. В таком случае можно применить один и тот же класс к этим блокам для изменения размеров и стилизации, а затем использовать отдельный ID-селектор к каждому блоку, чтобы задать им разное позиционирование.
Элементы также можно привязывать одновременно к нескольким классам. Это очень удобно, когда нужно применить стилизацию к отдельной группе элементов определенного типа. Например, имеется класс .content, который применен ко всем абзацам. Если нужно будет добавить границу или любую другую стилизацию к нескольким отдельным абзацам, то можно сделать это при помощи дополнительного CSS p class .bordered:
<p>Этот пункт не имеет границ.</p>
<p>Этот пункт имеет границы.</p> Обратите внимание на пустое пространство между двумя именами классов в атрибуте class второго абзаца. Ниже приведен пример CSS-кода:
.content { margin: 10px; font-size: 15px; color: blue }
.bordered { border: 2px solid #222 } Важно правильно применять id и CSS class, так как их неправильное использование может привести к ошибкам в отображении HTML-кода.
Перевод статьи “CSS Class vs ID: Which One to Use” был подготовлен дружной командой проекта Сайтостроение от А до Я.
www.internet-technologies.ru
Уроки Bootstrap 3.0 для начинающих (Четвертый урок)
В этом уроке основываясь на полученных знаниях я покажу как создать простой шаблон. Шаблон будет иметь следующую структуру
Для того чтобы приступить к созданию шаблона качаем заготовку Скачать
Для редактирования файлов я буду использовать NotePad++ поэтому рекомендую установить этот редактор. Скачивать его лучше с официального сайта он бесплатный.
Распакуйте архив zagatovka.zip и откройте файл index.html (с помощью NotePad++).
Первый шаг
Создадим контейнер и «строку» (под строкой я имею ввиду row). Для этого между тегами body пропишем следующий код:
<div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> Для того чтобы увидеть все блоки шаблона нужно добавить в файл со стилями стиль, для каждого блока. Откройте файл css/dopstyle.css и добавьте следующий код
/*ЦВЕТ И ОТСТУП СНИЗУ ДЛЯ БЛОКОВ*/ .head-block,.top-menu,.top-material,.left-sidebar,.content{ background:#ccc; margin-bottom:1px; } /*ВЫСОТА ШАПКИ*/ .head-block{ height:150px; } /*ВЫСОТА МЕНЮ*/ .top-menu{ height:30px; } /*ВЫСОТА БЛОКА ВАЖНЫЕ МАТЕРИАЛЫ*/ .top-material{ height:200px; } /*ВЫСОТА САЙДБАРА И БЛОКА КОНТЕНТ*/ .left-sidebar,.content{ height:300px; } /*ГРАНИЦА У КОНТЕНТА*/ .content{ border-left:1px solid #fff; } Обновите страницу и увидите все блоки. Высоту и цвет у всех блоков я задал для того чтобы можно было просмотреть структуру шаблона. Должно получиться так
Второй шаг
Желаемая структура шаблона создана теперь остается заполнить все блоки чтобы получить готовый шаблон которым можно пользоваться.
План действий (то что нужно сделать)
- Сделать шапку
- Сделать меню
- Добавить важные новости
- Добавить сайдбар
- Добавить содержание
Прежде чем приступать к оформлению шаблона надо удалить стили которые мы прописали для того чтобы увидеть шаблон очистите файл dopstyle.css
Шапка
Шапку не стал делать сам а скачал с сайта http://nika-sait.ru из раздела шапки для сайта. Шапку переименовал в head.jpg и сохранил в папку images затем добавил css в файл dopstyle.css
.head-block{ height:250px; background:url(../images/head.jpg)left center no-repeat; } параметр left нужен для того чтобы выровнять по левому краю параметр center выравнивает по вертикали важно учитывать порядок (если переводить на координаты, то первым параметр отвечает за горизонталь, а второй за вертикаль. Можно задавать даже значения в пикселях). После выполненных операции нужно обновить страницу. После обновления вы увидите шапку.
Меню
Создадим меню в котором будут пункты (цены, услуги, о нас, контакты, товары) для этого в файле index.html заменим код
<div></div> на
<div> <ul> <li><a href="#">Цены</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">Товары</a></li> </ul> </div> и добавим стили для меню в файл dopstyle.css
.top-menu{ background:#daf2fe; } .top-menu ul{ padding-left:0; margin-bottom:0; } .top-menu li{ display:inline-block; margin-left:10px; padding:3px 10px; } Обновите страницу и увидите результат. У меня получилось так
Добавить важные новости
В этом разделе я добавлю четыре новости как делить строку на колонки я показывал в 3 урокеЗамените код в index.html
<div></div> на
<div> <h4>Шапки для сайта</h4> Если вы не дружите с фотошопом или у вас совсем нет времени на самостоятельное создание шапки, то лучше воспользоваться готовой.<br/> </div> <div> <h4>Шапки для сайта</h4> Если вы не дружите с фотошопом или у вас совсем нет времени на самостоятельное создание шапки, то лучше воспользоваться готовой.<br/> </div> <div> <h4>Шапки для сайта</h4> Если вы не дружите с фотошопом или у вас совсем нет времени на самостоятельное создание шапки, то лучше воспользоваться готовой.<br/> </div> <div> <h4>Шапки для сайта</h4> Если вы не дружите с фотошопом или у вас совсем нет времени на самостоятельное создание шапки, то лучше воспользоваться готовой.<br/> </div> Обновите страницу и увидите результат
Остальные пункты я делать не стану. Оставлю для самостоятельной работы =)Скачать полушаблон
comments powered by HyperCommentspro-cod.ru
Смотрите также
Создаём административную панель на Bootstrap, CSS(LESS) и JavaScript. #5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main Page</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,400italic,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="js/jpushmenu/css/jPushMenu.css" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="fonts/font-awesome-4/css/font-awesome.min.css">
<link rel="stylesheet/less" type="text/css" href="css/style.less" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
</head>
<body>
<div>
<div>
<div><i></i></div>
<div>
<div>
<div>
<div>
<a href="#"></a>
</div>
<div>
<div><img src="images/avatar.png" alt="Avatar" /></div>
<div>
<h5>Big Daddy</h5>
<div>
<button data-toggle="dropdown" type="button">
<i></i><span>Available</span><i></i>
</button>
<ul>
<li><a href="#"><i></i><span>Busy</span></a></li>
<li><a href="#"><i></i><span>Invisible</span></a></li>
<li><a href="#"><i></i><span>Away</span></a></li>
</ul>
</div>
</div>
</div>
<ul>
<li ><a href="index.html"><i></i><span>Main Page</span></a></li>
<li><a href="#"><i></i><span>Page 2</span></a></li>
<li><a href="#"><i></i><span>Multilevel</span></a>
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<ul>
<li>
<a href="#" data-toggle="dropdown"><img alt="Avatar" src="images/avatar.png" /><span>Big Daddy</span> <b></b></a>
<ul>
<li><a href="#">Аккаунт</a></li>
<li><a href="#">Настройки</a></li>
<li></li>
<li><a href="#">Выйти</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="javascript:;"><i></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
<!-- Right Sidebar -->
<nav>
<h4>Menu</h4>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
</nav>
<!-- Footer JS scripts for faster loading -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/jpushmenu/js/jPushMenu.js"></script>
<script src="js/main/main.js"></script>
</body>
</html>
exabyte.ws
Блочная верстка сайта - урок с примером
Раньше на просторах Интернета был широко распространён табличный тип вёрстки, которому посвящена отдельная статья. Однако со временем этот подход к созданию структуры сайта устарел, и на смену ему пришла блочная вёрстка.
Отличия блочной вёрстки от табличной
Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега <table>, то концепция блочной вёрстки основана на активном использовании универсальных тегов <div>, внутрь которых помещается содержимое, включая другие теги.
Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки <div>, которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего», тогда как <table> — это таблица, которую нужно использовать для отображения табличных данных и не более того.
Единственный ощутимый минус блочной вёрстки — сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.
Суть блочной вёрстки
В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны.
Каждая часть страницы помещается в свой блок <div>: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.
Конечный HTML-документ представляет собой набор блоков <div> с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом <link>, или как минимум в контейнере <style> секции <head>.
Принципы блочной вёрстки
Первый — конечно же, повсеместное использование тега <div>, который можно назвать базовым элементом блочной структуры, но об этом было сказано уже достаточно много.
Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу. Идеально.
Третий принцип — таблицы нужно использовать не везде, а по необходимости, при этом полностью отказываться от них так же странно, как и применять не к месту.
Пример блочной вёрстки
Но, сколько не теоретизируй, а понимать всё проще на примере.
Итак, у нас есть макет (рисунок ниже). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. Зная базу, навести красоту и усложнить макет вы сможете и сами, а я лучше не буду перегружать пример.
Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги».
Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:
<!DOCTYPE html> <html> <head> <title>Блочная вёрстка</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div> <div> <h3>header (шапка сайта)</h3> </div> <div> <h3>Блок навигации</h3> </div> <div> <h3>Левая панель</h3> </div> <div> <h3>Основной контент страницы</h3> </div> <div> </div> <div> <h3>footer (низ сайта)</h3> </div> </div> </body> </html>Разберём некоторые моменты.
<div> — это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри <table>. Назначение дочерних контейнеров должно быть понятно, за исключением разве что блока <div>. Это вспомогательный слой, его смысл будет понятен, когда вы увидите код CSS.
Если открыть HTML-файл в браузере, не подключая таблицу стилей, страница будет выглядеть так.
Теперь добавим файл CSS, код которого приведён ниже.
body { background: #FFF; color: #000; font-family: Arial, sans-serif; font-size: 14px; } #header { background: #F5DEB3; width: 100%; height: 55px; } #container { background: #FFD700; margin: auto auto; text-align: center; width: 80%; height: 400px; } #navigation { background: #FE9798; width: 100%; height: 25px; } #sidebar { background: #40E0D0; float: left; width: 20%; height: 280px; } #content { background: #DCDCDC; float: right; width: 80%; height: 280px; } #clear { clear: both; } #footer { background: #00BFFF; width: 100%; height: 40px; }С помощью стилей мы последовательно оформляем содержимое тега <body> и всех находящихся внутри контейнеров с помощью ранее изученных правил.
#clear { clear:both; } запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.
CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.
Вот и весь смысл блочной структуры. Дальше можно только наполнять сайт содержимым и усложнять оформление, но делаться это будет всё равно по изложенному выше принципу. Также посмотрите статью про вёрстку сайта из PSD макета, там эти принципы показаны более наглядно.
www.seostop.ru
Создание вытягиваемого бокового меню для веб-сайта
В этом уроке мы расскажем, как создать боковое меню, такое, как у приложений для смартфона, но для веб-сайта. Мы опишем, как шаг за шагом создать меню, пригодное как для компьютеров, так и для смартфонов, начиная от структуры разметки и заканчивая добавлением эффекта вытягивания при открытии и закрытии меню.
Демонстрация работы – Скачать исходный код
Заметьте: для этого урока Вам потребуется библиотека jQuery, так что убедитесь, что последняя библиотека jQuery подключена на Вашей странице.
1. Структура
HTML:
<div> <div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Explore</a></li> <li><a href="#">Users</a></li> <li><a href="#">Sign Out</a></li> </ul> </div> <div> </div> </div>CSS:
body, html { height: 100%; margin: 0; overflow:hidden; font-family: helvetica; font-weight: 100; } .container { position: relative; height: 100%; width: 100%; } #sidebar { position: absolute; background: #DF314D; width: 240px; height: 100%; box-sizing: border-box; -moz-box-sizing: border-box; } #sidebar ul { margin: 0; padding: 0; list-style: none; } #sidebar ul li { margin: 0; } #sidebar ul li a { padding: 15px 20px; font-size: 16px; font-weight: 100; color: white; text-decoration: none; display: block; border-bottom: 1px solid #C9223D; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } #sidebar ul li:hover a { background: #C9223D; }Для начала мы создадим структуру для левого бокового меню, которую мы в результате спрячем влево. Мы добавили несколько основных стилей в пример, так что не стесняйтесь изменять вид Вашего бокового меню. Мы также добавили пустой блок под названием main-content . Этот блок будет содержать все элементы, которые Вы хотите показать на этой странице. Мы заполним его в следующем шаге.
Демонстрация работы
2. Создание простого бокового меню
HTML:
<div> <div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Explore</a></li> <li><a href="#">Users</a></li> <li><a href="#">Sign Out</a></li> </ul> </div> <div> <a href="#" data-toggle=".container"> <span></span> <span></span> <span></span> </a> <div> <h2>Creating Swipeable Side Menu For the Web</h2> <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> </div> </div> </div>CSS:
body, html { height: 100%; margin: 0; overflow:hidden; font-family: helvetica; font-weight: 100; } .container { position: relative; height: 100%; width: 100%; left: 0; -webkit-transition: left 0.4s ease-in-out; -moz-transition: left 0.4s ease-in-out; -ms-transition: left 0.4s ease-in-out; -o-transition: left 0.4s ease-in-out; transition: left 0.4s ease-in-out; } .container.open-sidebar { left: 240px; } #sidebar { position: absolute; left: -240px; background: #DF314D; width: 240px; height: 100%; box-sizing: border-box; } #sidebar ul { margin: 0; padding: 0; list-style: none; } #sidebar ul li { margin: 0; } #sidebar ul li a { padding: 15px 20px; font-size: 16px; font-weight: 100; color: white; text-decoration: none; display: block; border-bottom: 1px solid #C9223D; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } #sidebar ul li:hover a { background: #C9223D; } .main-content { width: 100%; height: 100%; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; position: relative; } .main-content .content{ box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 60px; width: 100%; } .main-content .content h2{ font-weight: 100; } .main-content .content p{ width: 100%; line-height: 160%; } .main-content #sidebar-toggle { background: #DF314D; border-radius: 3px; display: block; position: relative; padding: 10px 7px; float: left; } .main-content #sidebar-toggle .bar{ display: block; width: 18px; margin-bottom: 3px; height: 2px; background-color: #fff; border-radius: 1px; } .main-content #sidebar-toggle .bar:last-child{ margin-bottom: 0; }JS:
$(document).ready(function() { $("[data-toggle]").click(function() { var toggle_el = $(this).data("toggle"); $(toggle_el).toggleClass("open-sidebar"); }); });Теперь мы спрячем боковое меню влево с помощью свойств position:relative и left: -240px, это значение равняется ширине бокового меню. Мы добавили кнопку и скрипт jQuery, что позволит нам вызвать боковое меню по нажатию, переключая класс open-sidebar для контейнера, в котором находятся боковое меню и блок main-content.
После этого мы просто передвигаем весь контейнер влево на 240px, и это заставит появиться левое боковое меню. Если пользователь снова нажмет на кнопку, скрипт jQuery удалит класс у контейнера, и боковое меню исчезнет. Чтобы анимировать боковое меню так, как будто оно приезжает из левого края экрана, мы добавили переход стиля, чтобы создать такую же функциональность, как у приложений для смартфонов.
Теперь у нас есть простое боковое меню, которое вызывается нажатием кнопки мыши.
Демонстрация работы
3. Делаем меню вытягиваемым
HTML:
<div> <div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Explore</a></li> <li><a href="#">Users</a></li> <li><a href="#">Sign Out</a></li> </ul> </div> <div> <div></div> <a href="#" data-toggle=".container"> <span></span> <span></span> <span></span> </a> <div> <h2>Creating Swipeable Side Menu For the Web</h2> <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> </div> </div> </div>
CSS:
body, html { height: 100%; margin: 0; overflow:hidden; font-family: helvetica; font-weight: 100; } .container { position: relative; height: 100%; width: 100%; left: 0; -webkit-transition: left 0.4s ease-in-out; -moz-transition: left 0.4s ease-in-out; -ms-transition: left 0.4s ease-in-out; -o-transition: left 0.4s ease-in-out; transition: left 0.4s ease-in-out; } .container.open-sidebar { left: 240px; } .swipe-area { position: absolute; width: 50px; left: 0; top: 0; height: 100%; background: #f3f3f3; z-index: 0; } #sidebar { background: #DF314D; position: absolute; width: 240px; height: 100%; left: -240px; box-sizing: border-box; -moz-box-sizing: border-box; } #sidebar ul { margin: 0; padding: 0; list-style: none; } #sidebar ul li { margin: 0; } #sidebar ul li a { padding: 15px 20px; font-size: 16px; font-weight: 100; color: white; text-decoration: none; display: block; border-bottom: 1px solid #C9223D; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; } #sidebar ul li:hover a { background: #C9223D; } .main-content { width: 100%; height: 100%; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; position: relative; } .main-content .content{ box-sizing: border-box; -moz-box-sizing: border-box; padding-left: 60px; width: 100%; } .main-content .content h2{ font-weight: 100; } .main-content .content p{ width: 100%; line-height: 160%; } .main-content #sidebar-toggle { background: #DF314D; border-radius: 3px; display: block; position: relative; padding: 10px 7px; float: left; } .main-content #sidebar-toggle .bar{ display: block; width: 18px; margin-bottom: 3px; height: 2px; background-color: #fff; border-radius: 1px; } .main-content #sidebar-toggle .bar:last-child{ margin-bottom: 0; }
JS:
$(document).ready(function() { $("[data-toggle]").click(function() { var toggle_el = $(this).data("toggle"); $(toggle_el).toggleClass("open-sidebar"); }); }); $(".swipe-area").swipe({ swipeStatus:function(event, phase, direction, distance, duration, fingers) { if (phase=="move" && direction =="right") { $(".container").addClass("open-sidebar"); return false; } if (phase=="move" && direction =="left") { $(".container").removeClass("open-sidebar"); return false; } } });Самая сложная часть этого урока — сделать боковое меню вытягиваемым как на браузерах для смартфонов, так и на веб-браузерах для настольных компьютеров. На этом этапе нам нужно подключить хороший плагин, под названием TouchSwipe, созданный Matt Bryson для управления процессом вытягивания меню. Убедитесь, что этот плагин подключен в Вашем HTML файле.
Теперь, когда у нас есть возможность обнаружить жесты вытягивания и перетаскивания на смартфоне, мы воспользуемся этим, чтобы вызвать боковое меню. Ранее мы столкнулись с проблемой, так как мы применили обнаружение действия вытягивания для страницы целиком, то на смартфонах стало невозможно прокручивать страницу при увеличении, потому что открывалось боковое меню.
Так как это неприемлемо, мы добавили пустой блок класса swipe-area, чтобы определить область обнаружения жеста вытягивания. Область определения вытягивания расположена у левого края страницы, так что пользователь сможет вызвать боковое меню вытягиванием направо у левого края экрана. Это решает проблему случайного открытия меню при прокрутке страницы.
В нашем скрипте JS мы определяем действие вытягивания, использую функцию swipe(), выполняемую плагином TouchSwipe. Мы обнаруживаем две части действия вытягивания: движение и направление. Мы просто добавляем класс open-sidebar, чтобы вызвать меню, когда курсор мыши или палец пользователя движется вправо. Мы удаляем этот класс, если курсор мыши или палец пользователя движется в противоположном направлении.
В нашем эксперименте эта функция отлично работает на смартфонах, но не очень хорошо работает в браузерах на настольных компьютерах, так как когда мы двигаем мышку с зажатой кнопкой, браузеры запускают инструмент по выделению текста, который перебивает наше действие по определению вытягивания. Нам это не нужно, поэтому мы возвращаем false после того, как мы добавляем или удаляем класс open-sidebar. И это предотвращает запуск инструмента по выделению текста по умолчанию.
Демонстрация работы – Скачать исходный код
Заключение
И это все! У нас теперь есть вытягиваемое боковое меню, которое работает как в браузерах на настольных компьютерах, так и на смартфонах. Надеемся, что Вам понравился этот урок.
Автор урока Pete R.
Перевод — Дежурка
Смотрите также:
www.dejurka.ru
Yamm3 - адаптивное Bootstrap мегаменю
Легкий и чистый CSS, использует стандартную NavBar разметку и ликвидные системные классы сетки из Bootstrap 3.
Работа для фиксированной и гибкой планировки и имеет возможность включать любые элементы Bootstrap:
панели навигации, картинки, аккордеона, список, сетки, таблицы, формы.
Сетка Bootstrap внутри меню Yamm3
Accordion внутри меню Yamm3
Классическое меню
Меню с картинками
Yamm3 меню адаптированно под все гаджеты с разными разрешениями экрана. Настройка происходитом фреймворком Bootstrap3 автоматически.
Установка и подключение Yamm3
Для начала необходимо подключение. Подключаем CSS стили в секции Head сайта:
<head><link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-theme.min.css" rel="stylesheet"> <link href="css/yamm.css" rel="stylesheet"> </head>
Далее подключаем библиотеки Query и Bootstrap в раздел Head или Body:
<script src="js/jquery-1.10.2.min.js"></script><script src="js/bootstrap.min.js"></script>
Есть дополнительный JavaScript-код используется для предотвращения неожиданного закрыт в меню некоторых компонентов, таких как аккордеон, формы и др. Просто включите следующий код в вашу голову или тело раздел:
<script> $(document).on('click', '.yamm .dropdown-menu', function(e) { e.stopPropagation()})</script>
* Будьте внимательны: используется библиотека Bootstrap3 и jQuery, версией старше 1.9.0+
Yamm3 - разметка в HTML файле
Для базового использования необходимо добавить .yamm класс в верхней части навигационной панели разметки.Затем добавить свои меню в разметке .dropdown-menu класса.Вы так-же можете использовать .yamm-content как опцию обертки контента с padding'ом.
Ниже приведен простой пример.
<nav role="navigation"><ul><li><a href="#" data-toggle="dropdown">Dropdown</a><ul><li><div><div> <!-- Контент меню --></div></div></li></ul></li></ul></nav>
Для примера, давайте попробуем добавить аккордеон меню внутри нашей разметки меню. Вызываем #id accordion и используем класс .panel-group для группировки.
Вставляем вместо комментария <!-- Контент меню --> следующий код:
<div> <div> <div> <h5><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Accordion 1</a></h5> </div> <div> <div>Развернутый текст Accordion 1</div> </div> </div> <div> <div> <h5><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Accordion 2</a></h5> </div> <div> <div>Развернутый текст Accordion 2</div> </div> </div></div>
Есть много других компонентов (таблицы, акции, формы), которые можно добавить в навигационную панель. Изучение и применение этих компонентов можно реализовать самостоятельно.
Вам нужно скачать полный архив Yamm3 с офицального сайта и открыть index.html файл редактором кода.
ОФИЦАЛЬНАЯ страничка с примерами
РЕПОЗИТОРИЙ на GitHub
Скажите спасибо - поделитесь:
Комментарии (0)
oceana.nichost.ru
Изучаем CSS: class или id – что лучше?
Контролировать внешний вид HTML-элементов на странице можно при помощи нескольких селекторов. ID и CSS class являются наиболее распространенными, которые помогают не только в создании разметки HTML-документов, но и в их оформлении (стилизации).
Как применять CSS-селектор ID
Селектор ID используется для обозначения отдельного HTML-элемента с помощью уникального значения атрибута id. В следующем примере представлен элемент <div>, значением атрибута id которого является header.
В CSS к этому div-элементу можно применять различную стилизацию:
#header { width: 100%; height: 80px; background: blue }Не забывайте использовать знак # (хэштег) перед именем. Подробнее об этом можно узнать здесь и здесь.
Как применять CSS-селектор class
Селектор class HTML CSS используется для выделения отдельного или целой группы HTML-элементов с идентичным значением атрибута class.
В CSS к нескольким абзацам можно применять различную стилизацию:
.content { margin: 20px 0; line-height: 24px; font-size: 15px }Не забудьте использовать знак . (точка) перед названием класса при объявлении CSS-правила. Подробнее об этом можно узнать здесь и здесь.
Чем отличаются CSS Class и ID
Cелектор id используется для отдельных элементов страницы (#header), в то время как селектор class (.content) – для нескольких. Так как значение id задается лишь одному HTML-элементу. Другими словами, у нескольких элементов не может быть одинакового значения id в рамках одной отдельной страницы. Например, у вас может быть только один элемент с id #header, или же один элемент с id #footer.
Одинаковое значение class можно задавать одному или нескольким HTML-элементам. К примеру, у вас может быть несколько абзацев с классом .content или несколько ссылок с классом .external.
Следующий пример поможет лучше понять различия между CSS class и id, а также понять, как правильно использовать:
<div> <div> <a>Ссылка 1 </a> <a>Ссылка 2 </a> <a>Ссылка 3 </a> <a>Ссылка 4 </a> </div> <div> <p>Это наш первый абзац.</p> <p>Это наш второй абзац.</p> <p>Это наш третий абзац.</p> </div> </div>Приведенную выше HTML-разметку мы начали с div-элемента container. Мы задали ему id (#container), так как на нашей странице будет размещаться единственный контейнер. Внутри него мы размещаем разделы меню (#menu) и контента (#content). Как и в случае с контейнером, у нас будет только одно меню, и один раздел с контентом. Внутри menu располагаются четыре ссылки <a>, но к каждой из них мы применили CSS class (.link). Точно также мы применили класс (.text) к каждому абзацу в div-элементе content.
Если нужно стилизовать эти элементы, то можно использовать следующий пример:
#container { width: 1080px; margin: 0 auto; background: #eee } #menu { height: 90px; background: #ddd } .link { color: #000; text-decoration: none } #content { padding: 20px } .text { font-size: 15px }Когда используется class, а когда id?
ID используется для отдельных элементов, которые встречаются на странице только один раз. Например, заголовок, подвал, меню и т. д. Селектор class используется для одного или нескольких элементов, которые встречаются на странице несколько раз. Например, абзацы, ссылки, кнопки, элементы ввода. И хотя вы можете использовать class для отдельного элемента, но лучше использовать эти селекторы по назначению.
Также следует учитывать, что у HTML-элемента может быть указан и id, и class. Предположим, что на странице имеется два блока с одинаковым размером и стилизацией, но с разным позиционированием. В таком случае можно применить один и тот же класс к этим блокам для изменения размеров и стилизации, а затем использовать отдельный ID-селектор к каждому блоку, чтобы задать им разное позиционирование.
Элементы также можно привязывать одновременно к нескольким классам. Это очень удобно, когда нужно применить стилизацию к отдельной группе элементов определенного типа. Например, имеется класс .content, который применен ко всем абзацам. Если нужно будет добавить границу или любую другую стилизацию к нескольким отдельным абзацам, то можно сделать это при помощи дополнительного CSS p class .bordered:
<p>Этот пункт не имеет границ.</p> <p>Этот пункт имеет границы.</p>Обратите внимание на пустое пространство между двумя именами классов в атрибуте class второго абзаца. Ниже приведен пример CSS-кода:
.content { margin: 10px; font-size: 15px; color: blue } .bordered { border: 2px solid #222 }Важно правильно применять id и CSS class, так как их неправильное использование может привести к ошибкам в отображении HTML-кода.
Перевод статьи “CSS Class vs ID: Which One to Use” был подготовлен дружной командой проекта Сайтостроение от А до Я.
www.internet-technologies.ru
Уроки Bootstrap 3.0 для начинающих (Четвертый урок)
В этом уроке основываясь на полученных знаниях я покажу как создать простой шаблон. Шаблон будет иметь следующую структуру
Для того чтобы приступить к созданию шаблона качаем заготовку Скачать
Для редактирования файлов я буду использовать NotePad++ поэтому рекомендую установить этот редактор. Скачивать его лучше с официального сайта он бесплатный.
Распакуйте архив zagatovka.zip и откройте файл index.html (с помощью NotePad++).
Первый шаг
Создадим контейнер и «строку» (под строкой я имею ввиду row). Для этого между тегами body пропишем следующий код:
<div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div>Для того чтобы увидеть все блоки шаблона нужно добавить в файл со стилями стиль, для каждого блока. Откройте файл css/dopstyle.css и добавьте следующий код
/*ЦВЕТ И ОТСТУП СНИЗУ ДЛЯ БЛОКОВ*/ .head-block,.top-menu,.top-material,.left-sidebar,.content{ background:#ccc; margin-bottom:1px; } /*ВЫСОТА ШАПКИ*/ .head-block{ height:150px; } /*ВЫСОТА МЕНЮ*/ .top-menu{ height:30px; } /*ВЫСОТА БЛОКА ВАЖНЫЕ МАТЕРИАЛЫ*/ .top-material{ height:200px; } /*ВЫСОТА САЙДБАРА И БЛОКА КОНТЕНТ*/ .left-sidebar,.content{ height:300px; } /*ГРАНИЦА У КОНТЕНТА*/ .content{ border-left:1px solid #fff; }Обновите страницу и увидите все блоки. Высоту и цвет у всех блоков я задал для того чтобы можно было просмотреть структуру шаблона. Должно получиться так
Второй шаг
Желаемая структура шаблона создана теперь остается заполнить все блоки чтобы получить готовый шаблон которым можно пользоваться.
План действий (то что нужно сделать)
- Сделать шапку
- Сделать меню
- Добавить важные новости
- Добавить сайдбар
- Добавить содержание
Прежде чем приступать к оформлению шаблона надо удалить стили которые мы прописали для того чтобы увидеть шаблон очистите файл dopstyle.css
Шапка
Шапку не стал делать сам а скачал с сайта http://nika-sait.ru из раздела шапки для сайта. Шапку переименовал в head.jpg и сохранил в папку images затем добавил css в файл dopstyle.css
.head-block{ height:250px; background:url(../images/head.jpg)left center no-repeat; }параметр left нужен для того чтобы выровнять по левому краю параметр center выравнивает по вертикали важно учитывать порядок (если переводить на координаты, то первым параметр отвечает за горизонталь, а второй за вертикаль. Можно задавать даже значения в пикселях). После выполненных операции нужно обновить страницу. После обновления вы увидите шапку.
Меню
Создадим меню в котором будут пункты (цены, услуги, о нас, контакты, товары) для этого в файле index.html заменим код
<div></div>на
<div> <ul> <li><a href="#">Цены</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">Товары</a></li> </ul> </div>и добавим стили для меню в файл dopstyle.css
.top-menu{ background:#daf2fe; } .top-menu ul{ padding-left:0; margin-bottom:0; } .top-menu li{ display:inline-block; margin-left:10px; padding:3px 10px; }Обновите страницу и увидите результат. У меня получилось так
Добавить важные новости
В этом разделе я добавлю четыре новости как делить строку на колонки я показывал в 3 урокеЗамените код в index.html
<div></div>на
<div> <h4>Шапки для сайта</h4> Если вы не дружите с фотошопом или у вас совсем нет времени на самостоятельное создание шапки, то лучше воспользоваться готовой.<br/> </div> <div> <h4>Шапки для сайта</h4> Если вы не дружите с фотошопом или у вас совсем нет времени на самостоятельное создание шапки, то лучше воспользоваться готовой.<br/> </div> <div> <h4>Шапки для сайта</h4> Если вы не дружите с фотошопом или у вас совсем нет времени на самостоятельное создание шапки, то лучше воспользоваться готовой.<br/> </div> <div> <h4>Шапки для сайта</h4> Если вы не дружите с фотошопом или у вас совсем нет времени на самостоятельное создание шапки, то лучше воспользоваться готовой.<br/> </div>Обновите страницу и увидите результат
Остальные пункты я делать не стану. Оставлю для самостоятельной работы =)Скачать полушаблон
comments powered by HyperCommentspro-cod.ru
